<template>
  <div class="login-container">
    <el-form :model="userForm" ref="userForm" :rules="userFormRules">
      <el-form-item>
        <el-input v-model.trim="userForm.username"
                  placeholder="OA账号/NGOC外协账号"
                  auto-complete="off"
                  @keyup.enter.native="onLogin()"></el-input>
      </el-form-item>
      <el-form-item class="password-input">
        <el-input :maxlength="20" type="password"
                  placeholder="登入密码"
                  v-model.trim="userForm.password"
                  auto-complete="off"
                  @keyup.enter.native="onLogin()"></el-input>
        <!-- <p class="capital-key-tips">大写锁定已开启</p> -->
      </el-form-item>
      <!--<el-form-item>-->
        <!--<el-input :maxlength="10" type="text"-->
                  <!--placeholder="验证码"-->
                  <!--v-model.trim="userForm.verify"-->
                  <!--auto-complete="off"-->
                  <!--@keyup.enter.native="onLogin()" class="verify-code">-->
          <!--<img :src="srcUrl" id="verify-dom" alt=" " slot="suffix"-->
               <!--style="width: 80px; height: 28px; margin-right: 2px;cursor: pointer"-->
               <!--@click="changPin">-->
        <!--</el-input>-->
      <!--</el-form-item>-->
      <el-button @click="onLogin">登 录</el-button>
    </el-form>
  </div>
</template>

<script>
  import { userLogin, getLoginImage } from '@/api/api';
  export default {
    name: "Login",
    data () {
      return {
        srcUrl: '',
        userForm: {
          username: '',
          password: '',
          verify: ''
        },
        userFormRules: {
          username: [{required: true, message: "请输入用户名", trigger: 'change'}],
          password: [{required: true, message: "请输入密码", trigger: 'change'}],
          verify: [{required: true, message: "请输入验证码", trigger: 'change'}]
        }

      }
    },
    mounted () {

    },
    methods: {
      onLogin () {
        this.$refs.userForm.validate((valid) => {
          if (valid) {
            userLogin(this.userForm).then(data => {
              // console.log(data)
              // sessionStorage.setItem('user', JSON.stringify(data.shopDispatcher));
              // sessionStorage.setItem('jwt', data.jwt);
              this.$router.push({
                  path: '/Index'
              });
            })
          } else {
            return false;
          }
        });
      },
      changPin () {
        getLoginImage({dataType: {responseType: 'blob'}}).then(res => {
          let url = this.arrayBufferToBase64(res.data);
          sessionStorage.setItem('ng', res.headers.sessionid);
          this.srcUrl = `data:image/jpeg;base64,${url}`;
        }).catch(e => {
        })
      },
      arrayBufferToBase64(buffer) {
        let binary = '';
        let bytes = new Uint8Array(buffer);
        let len = bytes.byteLength;
        for (let i = 0; i < len; i++) {
          binary += String.fromCharCode(bytes[i]);
        }
        return window.btoa(binary);
      },
    }
  }
</script>

<style lang="scss">
  .login-container {

  }
</style>
